<template>
	<view class="box">
		<view class="search">
			<u-search @clear="clearKeyword" @custom="search" @search="search"  :animation='false' placeholder="请输入关键字" v-model="keyword"></u-search>
		</view>
		<view class="history" v-if="history_list.length>0">
			<view class="title">搜索历史</view>
			<view class="ul">
				<view v-for="(item,index) in history_list" class="li">
					<view  @click="historySearch(item)" >{{item}}</view>
					<u-icon @click.self="clearHistory(index)" name="close-circle-fill"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="hot_search" v-if="hot_list.length>0">
			<view class="title">热门搜索</view>
			<view class="ul">
				<view v-for="(item,index) in hot_list" @click="hotSearch(item)" class="li">{{item.name}}</view>
			</view>
		</view>
		
		<view class="recommend" v-if="recommend_xcx.length>0">
			<view class="title">发现精彩</view>
			<view class="ul">
				<view @click="tuijianxcxJump(item)" class="li flex flex_wrap mt20"  
					v-for="(item,index) in recommend_xcx" v-if="index<3">
					<view class="icon">
						<image :src="item.head_img"></image>
					</view>
					<view class="right flex ml20 flex_wrap flex_hc">
						<view class="name w100 hidden1">{{item.name}}</view>
						<!-- <view class="desc w100 hidden2">{{item.xcx_signature}}</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="w100 flex flex_jc" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white"  v-if="show_ad"></ad>
		</view>
	</view>
</template>

<script>
	import {getHotSearch,getRecommendXcx} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				history_list:[],
				hot_list:[],
				recommend_xcx:[],
				keyword:'',
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				recommend_xcx:getApp().globalData.recommend_xcx,
			}
		},
		
		onLoad: function () {
			if(uni.getStorageSync('history_list')){
				this.history_list = uni.getStorageSync('history_list')
			}
			
			getHotSearch().then(res=>{
				this.hot_list = res.data.hot_list
			})
			
			if(this.recommend_xcx.length==0){
				getRecommendXcx().then(res=>{
					if(res.code==0){
						this.recommend_xcx = res.data.list
						getApp().globalData.recommend_xcx = res.data.list
					}
				})
			}
		},
		
		onShareAppMessage() {
		   return {
			  path: "/pages/index/index"
			}
		},
		
		
		methods:{
			tuijianxcxJump(item){
				wx.navigateToMiniProgram({
					appId: item.appid,
					path: item.path,
				})
			},
			
			historySearch(e){
				this.keyword = e
				this.toSearchContent(e)
			},
			hotSearch(e){
				if(e.type==1){
					this.keyword = e.name
					this.toSearchContent(e.name)
				}else if(e.type==2){
					uni.navigateTo({
						url: e.url,
					});
					
				}else if(e.type==3){
					this.jump(e.appid,e.url)
				}else if(e.type==4){
					uni.setStorageSync('weburl',e.url)
					uni.navigateTo({
						url: '/pages/article/index?title='+e.name,
					}); 
				}else{
					this.keyword = e.name
					this.toSearchContent(e.name)
				}
				
			},
			clearHistory(index){
				this.history_list.splice(index,1)
				uni.setStorageSync('history_list',this.history_list)
			},
			
			clearKeyword(){
				this.keyword = ''
			},
			search(e){
				console.log('search')
				if(''==e){
					console.log('null')
				}else{
					this.toSearchContent(e)
				}
				
			},
			toSearchContent(e){
				if(uni.getStorageSync('history_list')){
					this.history_list = uni.getStorageSync('history_list')
					 var index = this.history_list.indexOf(e)
				
					 if(index<0){
						 this.history_list.unshift(e)
					 }else{
						 this.history_list.splice(index,1)
						 this.history_list.unshift(e)
					 }
					
				}else{
					this.history_list.unshift(e)
				}
				uni.setStorageSync('history_list',this.history_list)
				
				uni.navigateTo({
					url: '/pages/searchcontent/index?keyword='+e,
				});
			},
		}
	}
</script>
<style>
	page{background-color: #FFFFFF;}
</style>	
<style scoped>
	.recommend .right .name{font-size: 30rpx;font-weight: bold;color: #000000;}
	.recommend .right .desc{font-size: 25rpx;color: #666666;}
	.recommend .right{width: 510rpx;}
	.recommend .icon image{width: 100%;height: 100%;}
	.recommend .icon{width: 120rpx;height: 120rpx;border-radius: 100%;overflow: hidden;}
	.recommend{width: 650rpx;margin-top: 30rpx;}
	.recommend .title{color: #666666;font-size: 30rpx;}
	
	.box{display: flex;justify-content: center;flex-wrap: wrap;}
	.search{margin: 20rpx;width: 700rpx;}
	.history{width: 650rpx;}
	.history .title{color: #666666;font-size: 30rpx;}
	.history .ul{ display: flex;flex-wrap: wrap;}
	.history .li{color: #666666;font-size: 25rpx;margin-right: 15rpx;margin-top: 20rpx;display: flex;}
	
	.hot_search{width: 650rpx;margin-top: 30rpx;}
	.hot_search .title{color: #666666;font-size: 30rpx;}
	.hot_search .ul{ display: flex;flex-wrap: wrap;}
	.hot_search .li{color: #666666;font-size: 25rpx;margin-right: 15rpx;margin-top: 20rpx;
			padding: 5rpx 10rpx;background-color: #f5f5f5;border-radius: 10rpx;}

	
	
	
</style>